<template>
    <div class="wrapper " >
       <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
         <li v-for="i in list" :key="i" class="infinite-list-item">
           <!-- <div class="item border">{{i}}</div> -->
          <el-collapse v-model="activeName" accordion>
              <el-collapse-item :title="i.subjectname" :name="i">
                <div v-for="school in i.schoolname" :key="school" style="margin-top:3px;">
                  <el-button @click="getDrawerShow()"  type="primary" style="margin-left: 16px;" :key="school">
                    {{school}}
                  </el-button>
                </div>
              </el-collapse-item>
          </el-collapse>
         </li>
      </ul>
        <el-drawer
          v-infinite-scroll="load"
          style="font-size:20px;"
          :key="school"
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false">
          <!-- <span >{{rightschool}}</span> -->
          <el-row>
            <el-col :span="8" >
              <el-card :body-style="{ padding: '10px' }" style="width:280px; text-align:center;">
                <img :src="rightschool.icon_url">
                <div style="padding: 14px;  text-align:center;" >
                  <span>{{rightschool.school_name}}</span>
                  <div class="bottom clearfix">
                    <el-tag>Rank：{{rightschool.order}}</el-tag>
                    <el-tag>{{rightschool.school_title}}</el-tag>
                    <el-tag>{{rightschool.dual_class_name}}</el-tag>
                    <el-tag>{{rightschool.belong}}</el-tag>
                    <el-tag>{{rightschool.school_type}}</el-tag>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- <div class="info-title">{{rightschool.school_produce}}</div> -->
          <textarea style="width:100%; height:340px; margin-left:5px;" v-model="rightschool.school_produce"></textarea>
        </el-drawer>
    </div>
</template>

<script>
export default {
  name: 'HomeCategory',
  props: {
    data: Array,
    rightProvince: String,
    rightschooltype: String
  },
  data () {
    return {
      subject: [],
      activeName: '1',
      list: [],
      drawer: false,
      rightschool: {}
    }
  },
  methods: {
    getDrawerShow () {
      this.drawer = !this.drawer
      var school = event.currentTarget.innerText
      this.data.forEach(item => {
        if (item.school_name === school) {
          this.rightschool = item
        }
      })
    },
    GetsubjectList () {
      // 根据院校类别找学科
      if (!this.rightschooltype) {
        this.data.forEach(item => {
          item.subjects_list.split('、').forEach(res => {
            this.subject.push(res)
          })
        })
      } else {
        this.data.forEach(item => {
          if (item.school_type === this.rightschooltype) {
            item.subjects_list.split('、').forEach(res => {
              this.subject.push(res)
            })
          }
        })
      }
      // 根据学科找该省拥有该学科的高校，以对象格式放入数组，方便遍历显示
      this.subject = Array.from(new Set(this.subject))
      this.subject.forEach(item => {
        let o = {
          subjectname: item,
          schoolname: [],
          allsubject: []
        }
        this.data.forEach(d => {
          d.subjects_list.split('、').forEach(res => {
            if (item === res) {
              o.schoolname.push(d.school_name)
              o.allsubject.push(d.subjects_list)
            }
          })
        })
        this.list.push(o)
      })
      console.log(this.subject)
      console.log(this.list)
    }
  },
  watch: {
    data () {
      this.list = []
      this.subject = []
      this.GetsubjectList()
    },
    rightschooltype () {
      this.list = []
      this.subject = []
      this.GetsubjectList()
    }
  }
}
</script>

<style scoped>
.wrapper{
    position: absolute;
    width: 490px;
    height: 340px;
    margin-left: 10px;
}
.infinite-list{
    width:100%;
    height:100%;
    font-size:20px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
/* .info-title {
  font-size: 18px;
  width: 100%;
  height: 150px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
} */

</style>>
